<template>
  <!-- 移除外层div的点击事件 -->
  <div class="history-card">
    <!-- 将点击事件添加到卡片上半部分 -->
    <div class="card-top" @click="handleCardClick">
      <div class="image-area">
        <img :src="orderData.img || defaultImage" alt="状态图片" />
      </div>
      <div class="info-area">
        <div class="status" :style="{ color: getStatusColor(orderData.status) }">
          {{ getStatusText(orderData.status) }}
        </div>
        <div class="location">
          <img src="../assets/icons/aimpoint.svg" alt="定位" class="location-icon" />
          {{ orderData.pickup_address }}
        </div>
        <div class="location">
          <img src="../assets/icons/aimpoint.svg" alt="定位" class="location-icon" />
          {{ orderData.delivery_address }}
        </div>
      </div>
    </div>
    <!-- 按钮区域不需要点击事件 -->
    <div class="card-bottom">
      <custom-button
        v-for="(btn, index) in currentButtons" 
        :key="index"
        :button-text="btn.text"
        :is-enabled="btn.enabled"
        @click="handleButtonClick(btn.action)"
      />
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'  // 添加 axios 导入
import defaultCardImage from '@/assets/imgTest/cardData.jpg'
import CustomButton from './button1.vue'  // 导入按钮组件

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({
      img: '',
      size: 1,
      star: 0,
      r_uid: 0,
      s_uid: 0,
      detail: '',
      status: 0,
      remarks: '',
      order_id: 0,
      created_at: 0,
      limit_time: 0,
      pickup_type: 1,
      completed_at: 0,
      phone_number: '',
      total_amount: 0,
      pickup_method: 1,
      pickup_address: '',
      delivery_address: ''
    })
  },
  cardType: {
    type: String,
    required: true,
    validator: (value) => ['delegation', 'pickup'].includes(value)
  }
})

const defaultImage = defaultCardImage  // 修改这行

// 修改 emit 定义，添加新的事件
const emit = defineEmits([
  'buttonClick', 
  'cardClick',
  'showConfirmDialog',
  'showFinishDialog',
  'showFinishDelegationDialog'
])

// 更新状态文本映射
const getStatusText = (status) => {
  // 针对 delegation 类型的状态映射
  const delegationStatusMap = {
    0: '已发布',
    1: '配送中',
    2: '争议中',
    3: '已完成',
    4: '已送达', 
    5: '已取消',
    6: '取消中'
  }

  // 针对非 delegation 类型的状态映射
  const pickupStatusMap = {
    0: '已取消',
    1: '配送中',
    2: '争议中',
    3: '已完成',
    4: '已送达', 
    5: '已取消',
    6: '取消中'
  }

  // 根据 cardType 选择对应的状态映射
  const statusMap = props.cardType === 'delegation' ? delegationStatusMap : pickupStatusMap;
  return statusMap[status] || '未知状态';
}

// 更新状态颜色映射
const getStatusColor = (status) => {
  // 针对 delegation 类型的颜色映射
  const delegationColorMap = {
    0: '#1152CB', // 已发布
    1: '#27cb11', // 配送中
    2: '#F4a12c', // 争议中
    3: '#848484', // 已完成
    4: '#848484', // 已送达
    5: '#ce1818', // 已取消
    6: '#ce1818'  // 取消中
  }

  // 针对非 delegation 类型的颜色映射
  const pickupColorMap = {
    0: '#ce1818', // 已取消
    1: '#27cb11', // 配送中
    2: '#F4a12c', // 争议中
    3: '#848484', // 已完成
    4: '#848484', // 已送达
    5: '#ce1818', // 已取消
    6: '#ce1818'  // 取消中
  }

  // 根据 cardType 选择对应的颜色映射
  const colorMap = props.cardType === 'delegation' ? delegationColorMap : pickupColorMap;
  return colorMap[status] || '#848484';
}

// 获取当前状态下的按钮配置
const currentButtons = computed(() => {
  const status = props.orderData.status
  
  if (props.cardType === 'delegation') {
    // 委托历史按钮配置
    const baseButtons = [
      { text: '联系代取人', action: 'contact' },
      { text: '取消委托', action: 'cancel' },
      { text: status === 2 ? '评价' : '完成委托', action: status === 2 ? 'rate' : 'complete' }
    ]

    switch(status) {
      case 0: // 待接取
        return [
          { ...baseButtons[0], enabled: false },
          { ...baseButtons[1], enabled: true },
          { ...baseButtons[2], enabled: false }
        ]
      case 1: // 配送中
        return [
          { ...baseButtons[0], enabled: true },
          { ...baseButtons[1], enabled: true },
          { ...baseButtons[2], enabled: true }
        ]
      case 2: // 争议中
        return [
          { ...baseButtons[0], enabled: true },
          { ...baseButtons[1], enabled: false },
          { ...baseButtons[2], enabled: true }
        ]
      case 3: // 已完成
        return [
          { ...baseButtons[0], enabled: false },
          { ...baseButtons[1], enabled: false },
          { ...baseButtons[2], enabled: false }
        ]
      case 4: // 已送达
        return [
          { ...baseButtons[0], enabled: true },
          { ...baseButtons[1], enabled: false },
          { ...baseButtons[2], enabled: true }
        ]
      case 5: // 已取消
        return [
          { ...baseButtons[0], enabled: false },
          { ...baseButtons[1], enabled: false },
          { ...baseButtons[2], enabled: false }
        ] 
      case 6: // 取消中
        return [
          { ...baseButtons[0], enabled: false },
          { ...baseButtons[1], enabled: false },
          { ...baseButtons[2], enabled: false }
        ]     
      default:
        return baseButtons.map(btn => ({ ...btn, enabled: false }))
    }
  } else {
    // 代取记录按钮配置
    const baseButtons = [
      { text: '联系委托人', action: 'contact' },
      { text: '取消代取', action: 'cancel' },
      { text: '完成配送', action: 'complete' }
    ]

    switch(status) {

      case 1: // 配送中
        return baseButtons.map(btn => ({ ...btn, enabled: true }))
      case 2: // 争议中
        return [
          { ...baseButtons[0], enabled: true },
          { ...baseButtons[1], enabled: false },
          { ...baseButtons[2], enabled: false }
        ]
      case 6: // 取消中
      return [
          { ...baseButtons[0], enabled: true },
          { ...baseButtons[1], enabled: true },
          { ...baseButtons[2], enabled: false }
        ]
      case 0: // 已发布
      case 3: // 已完成
      case 4: // 已送达
      case 5: // 已取消
        return baseButtons.map(btn => ({ ...btn, enabled: false }))
      default:
        return baseButtons.map(btn => ({ ...btn, enabled: false }))
    }
  }
})

// 修改按钮点击处理方法
const handleButtonClick = async (action) => {
  if (action === 'cancel') {
    emit('showConfirmDialog', {
      orderId: props.orderData.order_id,
      status: props.orderData.status,
      cardType: props.cardType,
      s_uid: props.orderData.s_uid
    })
  } else if (action === 'complete') {
    if (props.cardType === 'delegation') {
      emit('showFinishDelegationDialog', props.orderData.order_id)
    } else {
      emit('showFinishDialog', props.orderData.order_id)
    }
  } else {
    emit('buttonClick', { 
      action, 
      orderId: props.orderData.order_id,
      cardType: props.cardType 
    })
  }
}

const handleCardClick = () => {
  emit('cardClick', {
    orderId: props.orderData.order_id,
    cardType: props.cardType
  })
}
</script>

<style scoped>
.history-card {
  background: #ffffff;
  padding: 16px;
  margin-bottom: 8px;  /* 将margin-bottom从16px减小到8px */
}

.card-top {
  display: flex;
  margin-bottom: 16px;
  padding: 12px 0;  /*添加上下内边距 */
  border-top: 1px solid #eee;  /* 添加上边框 */
  border-bottom: 1px solid #eee;
  cursor: pointer; /* 添加鼠标样式指示可点击区域 */
}

.image-area {
  width: 80px;
  height: 80px;
  margin-right: 16px;
}

.image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.info-area {
  
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* 改为 flex-start */
  gap: 6px;  /* 添加较小的间距 */
}

.status {
  font-size: 14px;
  font-family: "SourceHanFont";
  /* margin-bottom: 5px; */

}

.location {
  font-size: 16px;
  font-family: "SourceHanFont";
  color: #5b5b5b;
  line-height: 1.2; 
  display: flex;  /* 添加 flex 布局 */
  align-items: center;  /* 垂直居中 */
  gap: 4px;  /* 图标和文字之间的间距 */
}

.location-icon {
  width: 20px;
  height: 20px;
}

.label {
  color: #999;
  margin-right: 4px;
}

.card-bottom {
  display: flex;
  justify-content: space-around;
  gap: 40px;  /* 将间距从12px增加到20px */
  padding: 0 0px;  /* 添加左右内边距，防止按钮太靠近边缘 */
}


</style>
